<template>
  <div class="contract-payment">
    <s-table
      bordered
      size="middle"
      ref="table"
      :row-key="(record) => record.payment_id"
      :columns="paymentColumns"
      :data="paymentData"
    >
      <template slot="payment_id" slot-scope="text">
        <a-tag color="blue">{{text}}</a-tag>
      </template>
      <template slot="check_time" slot-scope="text, record">
        <a-button icon="edit" type="link" @click="editTime(record.payment_id)">{{text}}</a-button>
      </template>
      <template slot="img" slot-scope="text">
        <a @click="onPreview(text)"><img :src="text" width="50" height="30" /></a>
      </template>
      <template slot="amount" slot-scope="text">
        <a-tag color="red">{{text}}</a-tag>
      </template>
      <template slot="remarks" slot-scope="text, record">
        <a-button icon="edit" type="link" @click="onRemark(record.payment_id)">{{text}}</a-button>
      </template>
    </s-table>
    <a-modal :width="1000" v-model="previewVisible" :footer="null" @cancel="handleCancel">
      <img style="width: 100%" :src="previewImage" />
    </a-modal>
    <a-modal
      destroy-on-close
      title="编辑审打款的核时间"
      v-model="timeVisible"
      :confirm-loading="loading"
      :width="300"
      @ok="onSubmitTime"
      @cancel="onCancel"
    >
      <a-form-model
        ref="remarkForm"
        :model="remarkForm"
        :rules="remarkRules"
      >
        <a-form-model-item label="审核时间" prop="check_time">
          <a-date-picker v-model="remarkForm.check_time" @change="onChangeTime"></a-date-picker>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      v-model="remarkVisible"
      title="编辑打款备注"
      destroy-on-close
      :confirm-loading="loading"
      @ok="onSubmitRemark"
      @cancel="onCancel"
    >
      <a-form-model
        ref="remarkForm"
        :model="remarkForm"
        :rules="remarkRules"
      >
        <a-alert type="error" show-icon message="！！！！请正确填写官费、代理费、返款数额及此条打款的类型"></a-alert>
        <a-form-model-item label="类型" prop="type">
          <a-select v-model="remarkForm.type" placeholder="选择准确的打款类型">
            <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="官费" prop="official_fee">
          <a-input-number placeholder="输入要修改的官费" v-model="remarkForm.official_fee" style="width:100%" />
        </a-form-model-item>
        <a-form-model-item label="代理费" prop="agency_fee">
          <a-input-number placeholder="输入要修改的代理费" v-model="remarkForm.agency_fee" style="width:100%" />
        </a-form-model-item>
        <a-form-model-item label="返款" prop="refund_fee">
          <a-input-number placeholder="输入要返还的款项" v-model="remarkForm.refund_fee" style="width:100%" />
        </a-form-model-item>
        <a-form-model-item label="备注信息" prop="remarks">
          <a-textarea placeholder="输入打款备注信息" v-model="remarkForm.remarks" :rows="5"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import financeColumns from '@/columns/finance'
import { getEditRemark, getPayment, postEditRemark, postEditTime } from '@/api/contract'

export default {
  components: {
    STable
  },
  name: 'Payment',
  data () {
    return {
      paymentColumns: financeColumns.payment,
      paymentData: parameters => {
        return getPayment(Object.assign(parameters, this.queryParam)).then(res => {
          this.typeOpts = res.result.typeOpts
          return res.result
        })
      },
      queryParam: {},
      previewVisible: false,
      previewImage: '',
      timeVisible: false,
      remarkVisible: false,
      remarkForm: {},
      remarkRules: {
        type: [{ required: true, message: '请选择此条打款类型', trigger: 'change' }],
        official_fee: [{ required: true, message: '请输入要修改的官费', trigger: 'blur' }],
        agency_fee: [{ required: true, message: '请输入要修改的代理费', trigger: 'blur' }],
        refund_fee: [{ required: true, message: '请输入要返款金额', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入要修改的备注', trigger: 'blur' }]
      },
      loading: false,
      typeOpts: {}
    }
  },
  created () {
    this.queryParam['filter[contract_id]'] = this.$route.params.id
  },
  methods: {
    editTime (id) {
      this.remarkForm['payment_id'] = id
      this.timeVisible = true
    },
    onChangeTime (date, dateString) {
      this.remarkForm['check_time'] = dateString
    },
    onPreview (img) {
      this.previewImage = img
      this.previewVisible = true
    },
    handleCancel () {
      this.previewVisible = false
    },
    onRemark (id) {
      console.log(id)
      getEditRemark(id).then(res => {
        this.remarkForm = res.result
        this.remarkForm.payment_id = id
        this.remarkVisible = true
      })
    },
    onCancel () {
      this.loading = false
      this.remarkVisible = false
      this.timeVisible = false
      this.remarkForm = {}
    },
    onSubmitRemark () {
      const app = this
      const data = {}
      app.loading = true
      app.$refs.remarkForm.validate(valid => {
        if (valid) {
          data['contractpayment[type]'] = app.remarkForm.type
          data['contractpayment[official_fee]'] = app.remarkForm.official_fee
          data['contractpayment[agency_fee]'] = app.remarkForm.agency_fee
          data['contractpayment[refund_fee]'] = app.remarkForm.refund_fee
          data['contractpayment[remarks]'] = app.remarkForm.remarks
          data['payment_id'] = app.remarkForm.payment_id
          postEditRemark(data).then(res => {
            this.onCancel()
            app.$refs.table.refresh(true)
          })
        } else {
          app.loading = false
          return false
        }
      })
    },
    onSubmitTime () {
      const app = this
      const data = {}
      app.loading = true
      app.$refs.remarkForm.validate(valid => {
        if (valid) {
          data['check_time'] = app.remarkForm.check_time
          data['payment_id'] = app.remarkForm.payment_id
          postEditTime(data).then(res => {
            app.onCancel()
            app.$refs.table.refresh()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
